<template>
    <div class="siteContent">
      <top >
       <template #siteTop>
        <div class="title" >{{ title }}</div> 
       </template>
      </top>
      <nav-title >
                   <template #siteTitle="parentName">
            <div class="top" >
            <div class="title clear" >
                <ul>
                    <li v-for="(item,index) in parentName.childrenName" :key="index" @click="flag=!flag" >
                        <router-link to="">{{ item }}</router-link>
                    </li>
                </ul>
            </div>
            <div class="search">
                <input type="text" placeholder="搜索现场">
            </div>
        </div>
  </template>
      </nav-title>
        <main-box>
          <template #mainBoxTabs="parentName">
                      <div class="tab" v-if="flag">
            <div class="item"  v-for="(tab,index) in parentName.childName" :key="index">{{ tab }}</div>
        </div>
           </template>
           <template #mainBoxLists="parentName">
                  <div class="mainCon">
             <div class="lists"  >
                  <div class="item" v-for="(item,index) in parentName.childName" :key="index"  @click.stop="active=!active">
                          <div class="img">
                              <div class="backImage"  :style="item.img"></div>
                              <div class="mark"  @click.stop="markBtn">
                                <img  v-if="markDown" src="../../assets/images/mark/heart2.png" alt="" >
                                <img  v-else src="../../assets/images/mark/heart1.png" alt="" >
                              </div>
                          </div>
                    
                      <div class="text"  >
                          <div class="t1">{{ item.t1 }}</div>
                          <div class="t2">{{ item.t2 }}<span>&nbsp;</span>{{ item.t3 }}</div>
                      </div>
                  </div>
             </div>
         </div> 
           </template>
        </main-box>
        <cover v-if="active">
 
          <template #del>
         
                  <div class="del" @click="goBack"></div>
            
          </template>
                   <!-- <template #showImg="parentName">

  
          </template> -->
          <template #sidebar="parentName">
            <div class="tabbar">
                       <div class="main">
            <div class="box">
              <div class="title">
                <div class="name">
                  <div class="name-h">
                      <h3>如歌 (Cantabile)</h3>
                          <div class="text">
                    繁华如歌 缔造华丽的唯美时刻
                  </div>
                  </div>
                  <div class="name-mark"></div>
                </div>
              </div>
              <div class="look">
                <div class="text">
                  身临其境看婚礼
                </div>
              </div>
                </div>
                        <div class="info">
                <div class="head">
                  <img src="../../assets/images/touxiang.png" alt="">
                    <div class="name">
                      <div>笑笑</div>
                      <div>资深策划师</div>
                    </div>
                </div>
                <div class="vitae">
                  毕业于华东理工大学产品设计专业,5年从业经验.一场完美的婚姻,仅追求视觉上的美感是不够的,只有将真挚的爱情融合到设计中,才能成就一场意义非凡的梦中婚礼.
                </div>
              </div>
          
              </div>
         
            </div>
            
          </template> 
          <!-- <template #footer>
                     <div class="footer" v-for="(item,index) in tabList" :key="index">
                <div @click="toggleTab('sideTabItem1')"   class="fot fot1">
                   {{ item[0] }}
                </div>
                <div @click="toggleTab('sideTabItem2')"   class="fot fot2">
                 {{  item[1] }}
                </div>
                <div @click="toggleTab('sideTabItem3')"   class="fot fot3">
               {{    item[2] }}
                </div>
              </div>
          </template> -->
        </cover>
                <!-- <sidetab1 :is="currentTab" keep-alive>
              </sidetab1>  -->
    </div>
</template>
<script>
import top from "../top";
import navTitle from "../navTitle";
import mainBox from "../mainBox";
import cover from "../siteCover/cover";
// import sidetab1 from "../sideTab/sideTabItem1";
// import sidetab2 from "../sideTab/sideTabItem2";
// import sidetab3 from "../sideTab/sideTabItem3";
export default {
  data() {
    return {
      title: "现场布置",
      flag: false,
      active: false,
      markDown: 0
      // currentTab: "sideTabItem1",

      // tabList:{
      //   text:["查看案例效果", "查看策划案", "下一套"]
      // }
    };
  },
  methods: {
    goBack() {
      this.active = false;
    },
    markBtn() {
      if (this.markDown == 0) {
        this.markDown = 1;
      } else {
        this.markDown = 0;
      }
    }

    // toggleTab: function(tab) {
    //   this.currentTab = tab;
    // }
  },
  components: {
    top,
    navTitle,
    mainBox,
    cover
    // sidetab1,
    // sidetab2,
    // sidetab3
  }
};
</script>
<style  scoped>
@import url("../../assets/font/iconfont.css");
@import url("../../assets/css/base.css");
.siteContent {
  position: relative;
}
/deep/ header .logo::before {
  content: "\e622";
  font-family: "iconfont";
  font-size: 20px;
  color: #fff;
  line-height: 60px;
}
/deep/ header .logo img {
  display: none;
}
/deep/ header .logo a {
  display: none;
}
/deep/ header .title {
  width: 100px;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin: 0 auto;
}
.nav .top .title li:nth-child(2)::after {
  content: "\e60b";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #e7367d;
}
.nav .top .title li:nth-child(3)::after {
  content: "\e6e9";
  font-family: "iconfont";
  font-size: 25px;
  position: absolute;
  left: 80%;
  top: -20px;
  color: #fff;
}
.del {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 35px;
  top: 15px;
  /* background-color: #121212; */
}
.del::before {
  content: "\e62d";
  font-family: "iconfont";
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.tabbar {
  /* display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; */
}
.main {
  margin: 60px 40px 0 40px;
  background-color: #202020;
}
.box {
  border-bottom: 1px solid #ccc;
}
.box .name {
  display: flex;
  justify-content: space-between;
}
.box .name .name-h h3 {
  font-size: 20px;
  color: #fff;
}
.box .name .name-h .text {
  color: #585858;
  font-size: 14px;
}
.box .name-mark::after {
  content: "\e772";
  font-family: "iconfont";
  color: red;
  font-size: 20px;
}
.look {
  width: 100%;
  margin-top: 30px;
  height: 40px;
  border-radius: 25px;
  background-color: #585858;
  position: relative;
  margin-bottom: 40px;
}
.look .text {
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  margin-left: 20px;
}
.look .text::before {
  content: "\e66a";
  font-family: "iconfont";
  font-size: 16px;
  margin-right: 10px;
}
.look .text::after {
  content: "\e60e";
  font-family: "iconfont";
  position: absolute;
  top: 0;
  right: 20px;
}
.info {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}
.info .head {
  display: flex;
  justify-content: flex-start;
}
.info .head .name {
  display: flex;
  flex-direction: column;
  color: #fff;
  margin-left: 5px;
}
.vitae {
  margin-top: 20px;
  color: #fff;
  font-size: 14px;
}
/* .footer {
  margin-top: 40px;

  background-color: #202020;
}
.footer .fot {
  height: 50px;
  line-height: 50px;
  color: #dcdcdc;
  text-align: center;
}
.footer .fot1 {
  background-color: #323232;
  border-left: 5px solid #f83e7a;
} */
</style>

